<template>
  <div class="box">
    <span class="title">主页/工作台</span>
    <div class="echarts">
      <div id="main" style="width: 500px; height: 350px"></div>
      <div id="main2" style="width: 500px; height: 350px"></div>
    </div>

    <div class="box2">
      <div class="title2"><span>待办事项</span></div>
      <div>
        <div class="boxes">
          <img src="../assets/images/u31.png" alt="" class="img" />

          <span class="letter"
            ><el-badge :value="1" class="item">广告签约管理</el-badge></span
          >
        </div>
        <div class="boxes">
          <img src="../assets/images/u33.png" alt="" class="img" />
          <span class="letter"
            ><el-badge :value="1" class="item">审核管理</el-badge></span
          >
        </div>
        <div class="boxes">
          <img src="../assets/images/u35.png" alt="" class="img" />
          <span class="letter"
            ><el-badge :value="3" class="item">申述管理</el-badge></span
          >
        </div>
        <div class="boxes">
          <img src="../assets/images/u37.png" alt="" class="img" />

          <span class="letter">广告内容管理</span>
        </div>
        <div class="boxes">
          <img src="../assets/images/u67.png" alt="" class="img" />
          <span class="letter"
            ><el-badge :value="1" class="item">积分提现管理</el-badge></span
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";

export default {
  name: "FuncFormsBase",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
    };
  },
  mounted() {
    this.drawLine();
    this.drawLine2();
  },
  methods: {
    drawLine() {
      var echarts = require("echarts");
      var myChart = echarts.init(document.getElementById("main"));
      myChart.setOption({
        tooltip: {},
        xAxis: {
          type: "category",
          data: ["2019.05.02", "2019.05.03", "2019.05.04"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            type: "line",
            data: [5, 20, 36],
          },
        ],
      });
    },
    drawLine2() {
      var echarts = require("echarts");
      var myChart = echarts.init(document.getElementById("main2"));
      myChart.setOption({
        tooltip: {},
        xAxis: {
          type: "category",
          data: ["2019.05.02", "2019.05.03", "2019.05.04"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            type: "line",
            data: [5, 20, 36],
          },
        ],
      });
    },
  },
};
</script>
</script>

<style scoped>
.title {
  float: left;
  margin: 30px;
}
.echarts {
  margin-left: 200px;
  border: 1px solid #000;
  height: 350px;
  margin-top: 70px;
}
.box {
  padding-top: 0.1px;
}
#main {
  float: left;
}
#main2 {
  float: left;
}
.box2 {
  width: 1145px;
  height: 400px;
  border: solid 1px #000;
  margin-top: 20px;
  margin-left: 200px;
}
.title2 {
  height: 50px;
  width: 100%;
  background: rgba(242, 242, 242, 1);
}
.title2 span {
  float: left;
  margin: 15px;
  font-size: 14px;
}
.boxes {
  width: 230px;
  height: 100px;
  border-radius: 15px;
  border: solid 1px rgb(204, 204, 204, 1);
  margin: 40px 70px 50px 70px;
  float: left;
  font-size: 14px;
}
.letter {
  font-size: 12px;
  padding-top: 40px;
  display: inline-block;
}
.img {
  width: 70px;
  height: 80px;
  margin: 10px;
  float: left;
}
</style>